
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <base href="/">
  <meta charset="utf-8">
  <title>帐号设置</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="fly,layui,前端社区">
  <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
  <link rel="stylesheet" href="res/layui/css/layui.css">
  <link rel="stylesheet" href="res/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
  <div class="layui-container">
    <a class="fly-logo" href="/">
      <img th:src="${index[0].blogLogo}" alt="layui" width="200" height="40">
    </a>


    <ul class="layui-nav fly-nav-user">
      <!-- 登入后的状态 -->
      <shiro:user>
        <li class="layui-nav-item">
          <a class="fly-nav-avatar" href="javascript:;">
            <cite class="layui-hide-xs"><shiro:principal/></cite>
            <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i>
            <i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
            <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
          </a>
          <dl class="layui-nav-child">
            <dd><a href="user/userInfo"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
            <dd><a href="/"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
            <hr style="margin: 5px 0;">
            <dd><a href="javascript:;" id="logut" style="text-align: center;" >退出</a></dd>
          </dl>
        </li>
      </shiro:user>
    </ul>
  </div>
</div>

<div class="layui-container fly-marginTop fly-user-main">
  <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
    <li class="layui-nav-item">
      <a href="/">
        <i class="layui-icon">&#xe609;</i>
        我的主页
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="user/userindex">
        <i class="layui-icon">&#xe612;</i>
        用户中心
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="user/userInfo">
        <i class="layui-icon">&#xe620;</i>
        基本设置
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="user/listUserBlog">
        <i class="layui-icon">&#xe60a;</i>
        文章管理
      </a>
    </li>
    <li class="layui-nav-item layui-this">
      <a href="user/store">
        <i class="layui-icon">&#xe735;</i>
        VIP管理
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="user/order">
        <i class="layui-icon">&#xe63c;</i>
        订单管理
      </a>
    </li>
  </ul>

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>

  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">

      <div class="fly-case-header">
        <p class="fly-case-year">2021</p>
        <a href="user/store">
          <img class="fly-case-banner" src="http://kaninai.oss-cn-beijing.aliyuncs.com/kaninai1612356322235.jpg" alt="发现 Layui 年度最佳案例">
        </a>
      </div>

      <ul class="fly-case-list">
        <li th:each="vip:${vipshop}" th:data-id="${vip.getId()}">
          <a class="fly-case-img"  target="_blank" >
            <img th:src="${vip.getShopImage()}" th:alt="${vip.getShopName()}">
          </a>
          <h2><a  target="_blank" th:text="${vip.getShopName()}"></a></h2>
          <p class="fly-case-desc" style="text-align: center" th:text="${vip.getShopContent()}"></p>
          <h2 class="fly-case-info" style="margin-top: 0px">
            <a  class="fly-case-user" target="_blank"><img src="https://s3.ax1x.com/2021/01/28/y9konJ.jpg"></a>
            <p class="layui-elip" style="font-size: 12px;"><span style="color: #666;">上架时间：</span> <b th:text="${#dates.format(vip.getShopTime(), 'yyyy-MM-dd')}"></b></p>
            <p>价格：<a class="fly-case-nums fly-case-active" href="javascript:;" style=" padding:0 5px; color: red;font-weight: 700" th:text="${vip.getShopPrice()}"> </a>飞吻</p>
          </h2>
          <h2 style="padding-top: 0">
            <button class="layui-btn layui-btn-primary fly-case-active layui-btn-sm" data-type="praises" style="background: #1E9FFF;margin-top: 15px;color: #ffffff;">立即购买</button>      </h2>
        </li>
      </ul>

    </div>
  </div>
</div>
<script src="res/layui/layui.js"></script>
<script th:replace="footer::script-fragment"></script>
    <script>
      layui.cache.page = 'case';
      layui.cache.user = {
        username: '游客'
        ,uid: -1
        ,avatar: 'res/images/avatar/00.jpg'
        ,experience: 83
        ,sex: '男'
      };
      layui.config({
        version: "3.0.0"
        ,base: 'res/mods/' //这里实际使用时，建议改成绝对路径
      }).extend({
        fly: 'index'
      }).use('fly',function (){
        layui.define(['fly'], function(exports){
          var $ = layui.jquery;
          //求解管理
          var active = {
            //点赞
            praises: function(othis){
              var li = othis.parents('li')
              layer.confirm('确定购买吗？', function(index){
                $.post('admin/buyVip', {
                  "shopId": li.data('id')
                }, function(res){
                  if (res.success){
                    layer.msg('购买成功！', {
                      icon: 1
                      ,time: 1000
                    });
                  }else {
                    layer.msg('购买失败或'+res.data.balance, {
                      icon: 1
                      ,time: 1000
                    });
                  }
                });
                layer.close(index);
              })
            }
          };

          $('body').on('click', '.fly-case-active', function(){
            var othis = $(this), type = othis.data('type');
            active[type] && active[type].call(this, othis);
          });
          exports('case', {});
        });
      });
    </script>
</body>
</html>